<template>
  <div class="region">
      <div class="content">
        <div class="left">地区:</div>
        <ul>
            <li :class="{active:RegionFlag==''}" @click="changeRegion('')">全部</li>
            <li v-for='region in regionArr' :class="{active:RegionFlag==region.value}" :key="region.value" @click="changeRegion(region.value)">{{region.name}}</li>
        </ul>
      </div>
  </div>
</template>

<script setup lang="ts">
import {reqHospitalLevelAndRegion} from '@/api/home'
//引入组合式API函数
import {onMounted,ref} from 'vue';
import type {HospitalLevelAndRegionResponseData,HospitalLevelAndRegionArr} from '@/api/home/type'
//定义一个数组存储医院地区数据
let regionArr = ref<HospitalLevelAndRegionArr>([])
//控制医院地区高亮响应式数据
let RegionFlag=ref<String>('')
//组件挂载完毕，发一次请求
onMounted(()=>{
  getRegion();
});

const getRegion=async()=>{
    //获取医院的数据：默认获取第一页，一页十个医院的数据
  let result:HospitalLevelAndRegionResponseData=await reqHospitalLevelAndRegion('Beijin');
  if(result.code==200){
    //存储医院地区的数据
    regionArr.value=result.data;
  }
  console.log(result)
}

//点击地区的按钮回到
const changeRegion=(level:string)=>{
    //高亮响应式数据存储level数值
    RegionFlag.value=level;
}
</script>

<script lang="ts">
export default {
    name:'Region'
}
</script>

<style scoped lang="scss">
.region{
   margin-top: 10px;
    color: #7f7f7f;
    .content{
        display: flex;
        .left{
            margin-right: -6px;
            width: 55px;
        }
        ul{
            display: flex;
            flex-wrap: wrap;//换行显示
            li{
                margin-right: 10px;
                margin-bottom: 10px;
                &.active{
                    color: #55a6fe;
                }
            }
            //鼠标移动到上面变蓝色字体 鼠标变小手
            li:hover{
                color:#55a6fe;
                cursor: pointer;
            }
        }

    }
}
</style>